<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Document</title>
</head>

<body class="flex flex-col h-screen w-screen overflow-hidden p-4">
  <!-- <h1 class="text-3xl font-bold flex justify-center item-center my-3 px-3">
    Hello world! full operaion interaction screen
  </h1> -->

  <div class="flex flex-wrap justify-between">
    <div class="box w-60 h-20 bg-[red]">box</div>
    <div class="w-60 h-20 bg-[red]"></div>
    <div class="w-60 h-20 bg-[red]"></div>
    <div class="w-60 h-20 bg-[red]"></div>
    <div class="w-60 h-20 bg-[red]"></div>
    <div class="w-60 h-20 bg-[red]"></div>
    <div class="w-60 h-20 bg-[red]"></div>
    <div class="w-60 h-20 bg-[red]"></div>
  </div>
  <script>
    // 判断浏览器是否刷新
    // const observer = new PerformanceObserver((list) => {
    //   list.getEntries().forEach((entry) => {
    //     if (entry.type === "reload") {
    //       console.log('== reload ==>',)
    //     }
    //   });
    // });
    // observer.observe({ type: "navigation" });




    // 判断浏览器是否刷新
    const entries = performance.getEntriesByType("navigation");
    entries.forEach((entry) => {
      if (entry.type === "reload") {
        console.log('== 刷新 ===>',)
      } else if (entry.type === "back_forward") {
        console.log('== 前进后退 ===>',)
      } else if (entry.type === "navigate") {
        console.log('== 正常初始化 ===>',)
      } else {
        console.log('== 异常 ===>',)
      }
    });
    // document.addEventListener('dblclick', () => {
    //   console.log('== dblclick ==>')
    // })
    // const arr = [11, 22, 33, 44, 55, 66, 77]
    // // delete arr[2]
    // arr.length = 2
    // console.log('===arr===>', arr)

    // 直接修改数组.length 会截断数组，删除后面的元素
    // delete arr[index] 会保留后面的元素 , 且删除的项会变成 undefined , 不会影响数组的长度



    // async function async1() {
    //   console.log('===async1 start===>',)
    //   await async2()
    //   console.log('===async1 end ===>',);

    // }


    // async function async2() {
    //   await console.log('===async2 ===>',)
    // }

    // async1()

    // Promise.resolve().then(function () {
    //   console.log('promise1')
    // })


    // console.log('=== 主线程 开始执行 ===>',)



  </script>
</body>

</html>